<template>
    <div>
        <div>
          <header>
            <el-row type="flex" class="row-bg" justify="space-between">
              <div style="color: #fff; font-size: 20px;text-align: center;width: 100%;">发布活动</div>
            </el-row>
          </header>
          <div style="height: 40.8px"></div>
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="活动名称" prop="activityName" class="lunch-info">
            <el-input v-model="ruleForm.activityName"></el-input>
          </el-form-item>
          <el-form-item label="活动时间" required class="lunch-info">
            <el-col :span="11">
              <el-form-item prop="currentDate">
                <el-date-picker 
                  :picker-options="pickerOptions" 
                  type="date" 
                  placeholder="选择日期" 
                  v-model="ruleForm.currentDate" 
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 100%;"
                  >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="活动性质" required class="lunch-info">
            <el-cascader :options="options" :show-all-levels="false" placeholder="活动性质" v-model="ruleForm.activityType"></el-cascader>
          </el-form-item>
          <el-form-item label="联系人" prop="userName" class="lunch-info">
            <el-input v-model="ruleForm.userName"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="telNumber" class="lunch-info">
            <el-input v-model="ruleForm.telNumber"></el-input>
          </el-form-item>
          <el-form-item label="活动人数" prop="limitNumber" class="lunch-info">
            <el-input v-model="ruleForm.limitNumber"></el-input>
          </el-form-item>
          <el-form-item label="活动简介" prop="activityDesc" class="lunch-info">
            <el-input type="textarea" v-model="ruleForm.activityDesc"></el-input>
          </el-form-item>
          <el-form-item label="图片" prop="file">
            <el-upload
              action="a"
              ref="upload"
              :class="{ disabled: uploadDisabled }"
              list-type="picture-card"
              :limit="1"
              :on-change="handleChange"
              :on-remove="handleRemove"
              :auto-upload="false"
              accept="image/*"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>

<script>
import axios from 'axios'
  export default {
    name: 'LunchInfo',
    data() {
      return {
         pickerOptions: {
          disabledDate: (time) => {
            let nowData = new Date()
            nowData = new Date(nowData.setDate(nowData.getDate() - 1))
            return time < nowData
           }
         },
         options: [{
          value: '1',
          label: '体育',
          children: [{
            value: '11',
            label: '球类',
            children: [{
              value: '111',
              label: '篮球'
            }]
          }]
        }],
        ruleForm: {
          userId: '1102725724',
          activityName: '',
          currentDate: '',
          activityType: '',
          userName: '',
          telNumber: '',
          limitNumber: '',
          activityDesc: '',
          file: ""
        },
        rules: {
          activityName: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 8, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          currentDate: [
            { type: 'string', required: true, message: '请选择日期', trigger: 'change' },
            //{ validator: validateDate, trigger: 'change' }
          ],
          activityType: [
            { type: 'array', required: true, message: '请选择一个活动性质', trigger: 'change' }
          ],
          userName: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
          ],
          telNumber: [
            { required: true, message: '请输入联系方式', trigger: 'blur' },
            { min: 11, max: 11, message: '请输入 11 个字符', trigger: 'blur' }
          ],
          limitNumber: [
            { required: true, message: '请输入人数', trigger: 'blur' },
            { min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }
          ],
          activityDesc: [
            { required: true, message: '请填写活动说明', trigger: 'blur' },
            { min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'blur' }
          ],
          file: [
            { required: true, message: "请上传文件", trigger: "blur" }
          ]
        },
        loading: false,
        uploadDisabled: false,
      }
    },
    methods: {
      handleChange(file, fileList) {
        if (file.size > 1280 * 720) {
          this.$refs.upload.clearFiles();
          this.uploadDisabled = false;
          this.$message({
            message: "上传图片过大!",
            type: "error"
          });
        } else {
          this.uploadDisabled = fileList.length >= 1;
          this.ruleForm.file = file.raw; //将上传文件给表单的字段 
        }
      },
      handleRemove(file, fileList) {
        console.log("handleRemove", file);
        this.uploadDisabled = fileList.length >= 1;
      },
      submitForm(ruleForm) {
        this.$refs[ruleForm].validate((valid) => {
        if (valid) {
            let formData = new FormData();
        for(var key in this.ruleForm){
          formData.append(key,this.ruleForm[key]);
        }
        console.log(formData)
          // activityName: '',
          // currentDate: '',
          // activityType: '',
          // userName: '',
          // teleNumber: '',
          // file: "",
          // activityDesc: ''
        console.log(formData.get('userId'));
        console.log(formData.get('activityName'));
        console.log(formData.get('currentDate'));
        console.log(formData.get('activityType'));
        console.log(formData.get('userName'));
        console.log(formData.get('teleNumber'));
        console.log(formData.get('limitNumber'))
        console.log(formData.get('activityDesc'));
        console.log(formData.get('file'));

        axios({
          method:"post",
          url:"/lunched",
          headers: {
          "Content-Type": "multipart/form-data"
          },
          withCredentials:true,
          data:formData
      }).then((res)=>{
                console.log(res);
            });
              // let that = this
              // this.$refs[ruleForm].validate((valid) => {
              //   if (valid) {
              //     console.log('success');
              //     //that.ruleForm.price = parseFloat(that.staffinfoForm.price);
              //     that.ruleForm.activityName = that.ruleForm.activityName;
              //     that.ruleForm.currentDate = that.ruleForm.currentDate;
              //     that.ruleForm.activityType = that.ruleForm.activityType;
              //     that.ruleForm.userName = that.ruleForm.userName;
              //     that.ruleForm.teleNumber = that.ruleForm.teleNumber;
              //     that.ruleForm.file = that.ruleForm.file;
              //     that.ruleForm.activityDesc = that.ruleForm.activityDesc;
              //     console.log(that.ruleForm);
              //     axios(
              //       "/lunch/userlunch",
              //       that.ruleForm,
              //       'POST',
              //       0
              //       ).then(function(res) {
              //         if(res.code == 200) {
              //           alert("提交成功");
              //           that.$router.go(-1)
              //         }
              //       });
              //   } else {
              //     console.log('提交失败!');
              //     return false;
              //   }
              // });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        
      },
      resetForm(ruleForm) {
        this.$refs.upload.clearFiles();
        this.uploadDisabled = false;
        this.$refs.ruleForm.resetFields();
      }
    }
  }
</script>

<style>
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    line-height: 2.5rem;
    background: #67C23A;
    text-align: center;
    }
  .demo-ruleForm {
    padding-left: 25px;
    padding-top: 15px;
  },
  .lunch-info {
        padding: 15px 10px
  }
  .lunch-title {
    height: 41px;
    text-align: center;
    background-color: #67C23A;
  }
  .lunch-iconfont {
    font-size: 18px;
    padding: 6px 0;
    margin: 0
  }
  .disabled .el-upload--picture-card {
    display: none;
  }
  .el-input__inner {
    width: 150px;
  }
  .el-textarea__inner {
    width: 200px;
  }
</style>
